<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" prop="id" label="id"> </el-table-column>
      <el-table-column align="center" prop="username" label="用户名">
      </el-table-column>
      <el-table-column align="center" prop="password" label="密码">
      </el-table-column>
      <el-table-column align="center" prop="roleid" label="权限">
      </el-table-column>
      <el-table-column align="center" prop="isfreeze" label="冻结">
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import users from "@/assets/data/users.json";
export default {
  data() {
    return {
      reqData: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
    };
  },
  mounted() {
    this.getPageList(this.reqData.pageNum);
  },
  methods: {
    getPageList(pageNum) {
      const start = (pageNum - 1) * this.reqData.pageSize;
      const end = pageNum * this.reqData.pageSize;
      let res = users.slice(start, end);
      this.total = users.length;
      this.tableData = res;
    },
    handleCurrentChange(pageNum) {
      this.getPageList(pageNum);
    },
  },
};
</script>

<style scoped>
.page {
  position: absolute;
  bottom: 30px;
}
</style>
